import { useTitle } from 'ahooks';
import React, { useCallback, useEffect, useState } from 'react'
import { Ellipsis, Form, SearchBar } from 'antd-mobile'
import style from './index.less';
import { history } from 'umi';
import ActionPanel from '@/components/action-panel';
import classnames from 'classnames';
import List from './list'
import PriceArea from '@/components/jiagequjian';
import { getgy } from '@/services/caig'
interface DataDto {
    id: string;
    commodityName: string;
    expectedAmount: number;
    expectedPrice: number;
    updateTime: string;
    quantity: number;
    measurementUnit: string;
    shipmentPlace: string;
    originPlace: string;
}

const Caigou = () => {
    useTitle('我要卖货')

   

    const [data, setData] = useState<DataDto[]>([]);
    const [searchValue, setSearchValue] = useState('');
    const [visible1, setVisible1] = useState<boolean>(false)
    const [active, setActive] = useState<string | null>(null);
    const [form] = Form.useForm();

    const getDataThird = async () => {
        const res = await getgy({ auditStatus: 1, status: 0 })
        setData(res)
    }


    useEffect(() => {
        getDataThird()
    }, [])
    const handleInputChange = (value: string) => {
        setSearchValue(value)
        setTimeout(() => {
            onSearch(value)
        }, 500)
    }
    const onSearch = (value: any) => {
        console.log("SearchValue", value);
    }
    const onOk = useCallback(async () => {
        setActive(null);
    }, [])

    return (

        <div className={style.page}>

            <Form form={form} className={style['condition-warp']}>
                <div>
                    <SearchBar
                        placeholder='请输入关键字'
                        onChange={handleInputChange}
                        value={searchValue}
                        className={style.search}
                    />
                </div>
                <div className={style['item-top']}>
                    <div className={classnames(style.condition, {
                        [style.active]: null !== active,
                    })}>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'1' === active}
                                onClick={() => {

                                    if ('1' === active) {
                                        setActive(null);
                                        setVisible1(true);
                                    } else {
                                        setActive('1');
                                    }
                                }}
                                onReset={() => {
                                    onOk();
                                }}
                                onOk={onOk}
                                panel={
                                    <div>
                                        <List showSearch={true} />

                                    </div>
                                }
                            >
                                分类
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'2' === active}
                                onClick={() => {
                                    if ('2' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('2');
                                    }
                                }}
                                onReset={() => {
                                    onOk();
                                }}
                                onOk={onOk}
                                panel={
                                    <div>
                                        <List />

                                    </div>
                                }
                            >
                                供应地
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'3' === active}
                                onClick={() => {
                                    if ('3' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('3');
                                    }
                                }}
                                panel={
                                    <PriceArea />
                                }
                            >
                                价格
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'4' === active}
                                onClick={() => {
                                    if ('4' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('4');
                                    }
                                }}
                                onReset={() => {
                                    onOk();
                                }}
                                onOk={onOk}
                                panel={
                                    <div>
                                        <List />

                                    </div>
                                }
                            >
                                产地
                            </ActionPanel>
                        </div>
                    </div>
                </div>
            </Form>


            <div className={style.box}>
                {data.map((item) => (
                    <div
                        key={item.id}
                        className={style['list-item']}
                        onClick={() => {
                            history.push('xiangqing?id=' + item.id);
                        }}
                    >
                        <div className={style.con}>

                            <div className={style['con-right']}>
                                <div className={style.title}>
                                    <div className={style['title-con']}>

                                    </div>
                                    <div className={style.date}>{ }</div>
                                </div>

                                <span>
                                    <span className={style.no}>求购中</span>
                                    <span className={style.name}>
                                        <Ellipsis direction='end' content={item.commodityName} />
                                    </span>

                                    <span className={style.time}>{item.updateTime}</span>

                                </span>

                                <div className={style.item}>
                                    <div className={style.note}>数量</div>
                                    <div>
                                        {item.quantity}
                                        {item.measurementUnit}
                                    </div>
                                </div>
                                <div className={style.item}>
                                    <div className={style.note}>发货地</div>
                                    <div>
                                        {item.shipmentPlace}

                                    </div>
                                </div>
                                <div className={style.item}>
                                    <div className={style.note}>产地</div>
                                    <div>
                                        {item.originPlace}

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
                <div className={style.cut}>我也是有底线的</div>

            </div>
        </div>




    )
}
export default Caigou;


